<template>
    <div>
        <div class="plate" ref="plate">
            <!-- <header class="header">
                <div class="header-title">设备管理</div>
                <img class="header-img" src="@/assets/three/image/header.png">
            </header> -->
            <ZdyHeader title="设备管理" />
            <div class="left-content animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card left-card-1">
                        <img class="background" src="@/assets/three/image/equipment/left-card-1-background.png" alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="equipment-statistics">
                            <div class="statistics">
                                <div class="item">
                                    <img class="number-background"
                                        src="@/assets/three/image/equipment/number-background.svg" alt="">
                                    <div class="info">
                                        <Statistic :value="deviceStatistics.totalEquipment"
                                            :valueStyle="{ color: '#66FFFF', fontSize: '22px' }"></Statistic>
                                        <div class="label">
                                            设备总数
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <img class="number-background"
                                        src="@/assets/three/image/equipment/number-background.svg" alt="">
                                    <div class="info">
                                        <Statistic :value="deviceStatistics.intactRate"
                                            :valueStyle="{ color: '#66FFFF', fontSize: '22px' }" suffix="%"
                                            :suffixStyle="{ fontSize: '22px', color: '#37dbed', fontWeight: 'bold' }" />
                                        <div class="label">
                                            设备完好率
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="equipment-info">
                                <div class="item">
                                    <Statistic :value="deviceStatistics.normalRunning"
                                        :valueStyle="{ color: '#35DF4A', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">正常运行</div>
                                </div>
                                <div class="item">
                                    <Statistic :value="deviceStatistics.waitingRepair"
                                        :valueStyle="{ color: '#1481E0', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">待维修</div>
                                </div>
                                <div class="item">
                                    <Statistic :value="deviceStatistics.fault"
                                        :valueStyle="{ color: '#D43030', fontSize: '22px' }">
                                    </Statistic>
                                    <div class="label">故障</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备运行状态趋势</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="costOptions" />
                        </div>
                    </div>
                    <div class="card left-card-2">
                        <img class="background" src="@/assets/three/image/equipment/left-card-2-background.png" alt="">

                        <div class="card-header">
                            <div class="title">
                                <div class="text">实时报警</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="call-the-police">
                            <div class="item" v-for="(item, index) in realTimeAlarm" :key="index">
                                <img src="@/assets/three/image/equipment/icon.svg" alt="">
                                <div class="msg">{{ item }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/equipment/right-card-1-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">能耗分析</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div>
                            <ECharts :option="analyzeOption" />
                        </div>
                    </div>
                    <div class="card right-card-2">
                        <img class="background" src="@/assets/three/image/equipment/right-card-2-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">设备维修记录</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="access-control-records">
                            <div class="record" v-for="(item,index) in deviceRepairRecord" :key="index">
                                <div class="item">
                                    <img src="@/assets/three/image/equipment/wrench.svg" alt="">
                                    <div class="info">
                                        <div class="label">{{ item.description }}</div>
                                        <div class="msg-and-time">
                                            <div class="time">{{ item.repairTime }}</div>
                                        </div>
                                    </div>
                                    <div :class="['status' , item.completed ? 'success' : 'error']">
                                        {{ item.completed ?'已完成' : '未完成' }}
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import * as echarts from 'echarts';
import ZdyHeader from '@/components/ZdyHeader';

// 在组件中单独引入
import 'animate.css/animate.min.css';
import { onMounted } from 'vue';

import { getDeviceStatistics, getDeviceRunStatusTrend, getRealTimeAlarm, getEnergyConsumptionAnalysis , getDeviceRepairRecord} from '@/api/park/equipment';
import { ref } from 'vue';

const deviceStatistics = ref({});
const realTimeAlarm = ref([]);
const deviceRepairRecord = ref([]);
function getImageUrl(url) {
    return new URL(url, import.meta.url).href;
}
const scheduleData = [
    {
        "name": "Zhang", // 假设 "张三" 的英文名
        "phone": "1387777777",
        "shift": "早班", // 早班
        "timeRange": "08:00-14:00",
        "color": null // 早班无颜色
    },
    {
        "name": "Li Si", // 假设 "李四" 的英文名
        "phone": "1387777777",
        "shift": "中班", // 中班
        "timeRange": "14:00-24:00",
        "color": "orange" // 中班为橙色
    },
    {
        "name": "Li Si",
        "phone": "1387777777",
        "shift": "晚班", // 晚班
        "timeRange": "00:00-08:00",
        "color": "red" // 晚班为红色
    },
    {
        "name": "Li Si",
        "phone": "1387777777",
        "shift": "晚班",
        "timeRange": "00:00-08:00",
        "color": "red"
    }
];

const accessControlRecords = [
    {
        "id": 1,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 2,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 3,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 4,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 5,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 6,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    },
    {
        "id": 7,
        "name": "张三",
        "workshop": "1号车间",
        "timestamp": "2025-04-13 12:00:00"
    }
]


const costOptions = ref(null);

const analyzeOption = ref(null);
onMounted(() => {
    getDeviceStatistics().then(res => {
        deviceStatistics.value = res.data;
    })
    getDeviceRunStatusTrend().then(res => {
        costOptions.value = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['正常运行', '故障设备'],
                textStyle: {
                    color: '#FFFFFF' // 设置图例文字颜色为白色
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res.data.dateList,
                axisLabel: {
                    color: '#FFFFFF' // 设置X轴标签文字颜色为白色
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#FFFFFF' // 设置Y轴标签文字颜色为白色
                }
            },
            series: [
                {
                    name: '正常运行',
                    type: 'line',
                    lineStyle: {
                        color: '#24B552'
                    },
                    itemStyle: {
                        color: '#24B552' // 设置"故障设备"数据点颜色为红色
                    },
                    data: res.data.normalRun,
                },
                {
                    name: '故障设备',
                    type: 'line',
                    lineStyle: {
                        color: '#FF0000' // 设置"故障设备"线条颜色为红色
                    },
                    itemStyle: {
                        color: '#FF0000' // 设置"故障设备"数据点颜色为红色
                    },
                    data: res.data.faultyEquipment,
                }
            ],
            grid: { left: '7%', right: '7%', bottom: '2%', containLabel: true },
        };
    })
    getRealTimeAlarm().then(res => {
        realTimeAlarm.value = res.data;
    })
    getEnergyConsumptionAnalysis().then(res => {
        console.log(res);
        
        analyzeOption.value = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: 16, // 图例放置在容器的右侧
                top: 'middle', // 垂直居中对齐
                itemWidth: 10, // 图例标记的图形宽度。
                itemHeight: 10, // 图例标记的图形高度。
                textStyle: {
                    color: '#FFFFFF' // 设置图例文字颜色为白色
                },
                data:res.data.map(item => (item.abnormalName))
            },
            series: [
                {
                    name: '设备类型',
                    type: 'pie',
                    radius: ['45%', '80%'], // 设置内半径和外半径，形成环形图
                    center: ['40%', '50%'], // 将图表位置调整到左侧 ('35%' 表示距离左侧的距离)
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:res.data.map(item => ({ name:item.abnormalName ,value:item.count  }))
                }
            ],
        };
    })
    getDeviceRepairRecord().then(res => { 
        deviceRepairRecord.value = res.data;
    })
})
</script>
<style lang="scss" scoped>
@import "@/assets/styles/three-home.scss";

.left-card-1 {
    height: 580px !important;

    .statistics {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30px;

        .item {
            width: 150px;
            height: 72px;
            position: relative;

            .number-background {
                position: absolute;
                width: inherit;
                height: inherit;
            }

            .info {
                display: flex;
                width: inherit;
                height: inherit;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;

                .label {
                    font-size: 14px;
                    color: #fff;
                    margin-top: 5px;
                }
            }
        }
    }

    .equipment-info {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 30px 0;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .label {
                font-size: 14px;
                color: #fff;
                margin-top: 5px;
            }
        }
    }

    :deep(.chart-container) {
        width: 100%;
        height: 220px !important;
    }
}

.left-card-2 {
    height: 280px !important;

    .call-the-police {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;

        .item {
            height: 40px;
            width: 100%;
            background: rgba(#D43030, 0.6);
            border-radius: 4px;
            display: flex;
            align-items: center;
            margin: 10px 0;

            img {
                width: 18px;
                height: 18px;
                margin-right: 10px;
                margin-left: 15px;
            }

            .msg {
                font-size: 14px;
                color: #fff;
            }
        }
    }
}

.right-card-1 {
    height: 350px !important;

    :deep(.chart-container) {
        height: 270px !important;
    }
}

.right-card-2 {
    height: 510px !important;

    .record {
        width: 100%;
        padding: 0 30px;

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #FFFFFF;
            padding: 15px 0;

            img {
                width: 48px;
                height: 48px;
                margin-right: 10px;
                flex: 1;
            }

            .info {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                flex: 4;
                color: #fff;

                .label {
                    font-size: 14px;
                }

                .msg-and-time {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: #ABABAB;
                    margin-top: 5px;
                }

            }

            .status {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 58px;
                height: 30px;
                border-radius: 4px;
                font-size: 14px;

            }

            .success {
                color: #43CF7C;
                border: 1px solid #43CF7C;
            }

            .processing {
                color: #FF8D1A;
                border: 1px solid #FF8D1A;
            }

            .error {
                color: #D43030;
                border: 1px solid #D43030;
            }
        }
    }
}
</style>